<template>
<!-- style="width: 195px" -->
<!-- style="width: 195px; margin-right: 10px" -->
  <!-- 选择城市 -->
  <el-row type="flex" style="width: 70%">
    <el-select
      v-model="value"
      v-bind="$attrs"
      placeholder="请选择"
      @change="getcitys(value)"
      style="width: 90%"
      >
      <el-option
        v-for="(item, index) in citys"
        :key="index"
        :label="item"
        :value="item"
        />
    </el-select>
    <el-select
      v-bind="$attrs"
      v-model="value1"
      placeholder="请选择"
      @change="getCityName"
      style="width: 90%"
    >
      <el-option
        v-for="(item, index) in areas"
        :key="index"
        :label="item"
        :value="item"/>
    </el-select>
  </el-row>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      citys: [],
      value: '',
      areas: [],
      value1: ''
    }
  },
  async created () {
    this.citys = await provinces()
  },

  methods: {
    getcitys (value) {
      this.value1 = ''
      console.log(value)
      this.areas = citys(value)
      this.$emit('update:province', value)
    },
    getCityName (value) {
      this.$emit('update:city', value)
    },
    updateCity (province, city) {
      this.value1 = city
      this.value = province
      this.areas = citys(province)
    },
    clearCity () {
      this.value1 = ''
      this.value = ''
    }
  }
}
</script>

<style></style>
